<script setup>
import { CUSTOM_ACTIVITY_STATUS_MAP } from '@/configs/constant'
import ProgrammeList from './ProgrammeList.vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  showStatus: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['custom-click'])

const handleClick = () => {
  emits('custom-click')
}

// const isExpand = ref(false)

// const toggleExpand = () => {
//   isExpand.value = !isExpand.value
// }
</script>

<template>
  <view
    class="level-activity-item"
    @tap.stop="handleClick"
  >
    <view class="mb-32rpx pos-relative">
      <view
        v-if="showStatus"
        class="status-badge"
        :style="{
          backgroundImage: CUSTOM_ACTIVITY_STATUS_MAP[info.status].color,
        }"
      >
        {{ CUSTOM_ACTIVITY_STATUS_MAP[info.status].label }}
      </view>
      <view class="title ellipsis">
        {{ info.name }}
      </view>
      <view class="flex justify-between items-center">
        <view class="desc">活动时间：{{ info.startTime }}</view>
        <view class="desc">活动时长：{{ info.duration }}分钟</view>
      </view>
    </view>
    <view class="item-container">
      <ProgrammeList
        :list="info.programList"
        show-expand
      />
      <!-- <view v-for="item in info.programList.slice(0, 2)" :key="item.id" class="item-container-item">
        <image class="item-container-item-img" :src="judgeShowImage(item.coverUrl)"></image>
        <view class="flex flex-1 flex-col justify-between">
          <view class="title">{{ item.name }}</view>
          <view class="flex justify-between items-center">
            <view class="desc">节目类型：大师的</view>
            <view class="desc">节目时长(分钟)：{{ item.duration }}</view>
          </view>
        </view>
      </view>
      <view v-if="info.programList.length > 2" class="expand" @click="toggleExpand">
        <text>
          {{ isExpand ? '收起' : '展开' }}
        </text>
        <wd-icon v-if="isExpand" name="chevron-up" size="40rpx"></wd-icon>
        <wd-icon v-else name="chevron-down" size="40rpx"></wd-icon>
      </view> -->
    </view>
    <view class="item-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.level-activity-item {
  padding: 24rpx;
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-sizing: border-box;

  .title {
    margin-bottom: 32rpx;
    padding-right: 120rpx;
    color: $uni-text-color;
    font-size: 28rpx;
    font-weight: 500;
  }

  .status-badge {
    position: absolute;
    top: 0;
    right: -24rpx;
    width: 104rpx;
    height: 42rpx;
    line-height: 42rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    border-radius: 21rpx 0 0 21rpx;
  }

  .desc {
    color: $uni-text-color-grey;
    font-size: 24rpx;
  }

  .item-container {
    padding: 0 32rpx;
    background: #f4f7fc;

    // &-item {
    //   display: flex;
    //   align-items: stretch;
    //   padding: 32rpx 0;
    //   border-bottom: 1rpx solid $uni-border-color;

    //   &-img {
    //     width: 100rpx;
    //     height: 80rpx;
    //     margin-right: 24rpx;
    //     border-radius: 8rpx;
    //   }
    // }

    // .expand {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   height: 80rpx;
    //   color: $uni-color-primary;
    //   font-size: 24rpx;
    // }
  }
}
</style>
